<template>
  <el-dialog :title="'字典配置'" :visible.sync="visible"
             :close-on-click-modal="false" @close="hideDo">

    <el-form ref="form" :model="row" label-width="80px" align="left">

      <el-form-item label="名称" prop="name" :rules.name="[{ required: true, message: '请输入', trigger: 'blur' }]">
        <el-input v-model="row.name" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="编码" v-if="isAdd" prop="code"
                    :rules.code="[{ required: true, message: '请输入', trigger: 'blur' }]">
        <el-input v-model="row.code" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="row.remark" placeholder="请输入"/>
      </el-form-item>

      <el-form-item label="数据类型" v-if="isAdd">
        <el-select v-model="row.type" placeholder="数据类型">
          <el-option
            :label="'列表'"
            :value="null">
          </el-option>
          <el-option
            :label="'树结构'"
            :value="'tree'">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" v-if="row.type == 'tree'">
        <el-button size="small" type="warning" @click="addRow()">新增一级节点</el-button>

        <div>
          <el-table
            :data="tree"
            :indent="60"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <!--<el-table-column-->
            <!--prop="value"-->
            <!--min-width="150">-->
            <!--</el-table-column>-->


            <el-table-column prop="value" label="值" min-width="220"
                             header-align="center">
              <template slot-scope="scope">
                <!--<el-input v-model="scope.row.value" placeholder="请输入"/>-->

                <input style="height: 32px" v-model="scope.row.value"></input>
              </template>
            </el-table-column>
            <el-table-column label="操作" v-if="this.$isAdmin()" fixed="right" width="220" align="center"
                             :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-button size="small" type="success" @click="addRow(scope.row.id)">添加子节点</el-button>
                <el-button size="small" type="info" @click="treeDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>

      <el-form-item v-else label="">
        <el-button size="small" type="warning" @click="addRow()">新增</el-button>

        <el-table :data="row.systemDictDataList" highlight-current-row v-loading="loading" stripe="stripe"
                  border="border"
                  @sort-change="sortChange" style="width: 100%;" max-height="690">
          <!--<el-table-column prop="dictKey" label="键" width="160"-->
          <!--header-align="center">-->
          <!--<template slot-scope="scope">-->
          <!--<el-input v-model="scope.row.dictKey" placeholder="请输入"/>-->
          <!--</template>-->
          <!--</el-table-column>-->

          <el-table-column prop="value" label="值" min-width="150"
                           header-align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.value" placeholder="请输入"/>
            </template>
          </el-table-column>

          <!--<el-table-column prop="extField" label="扩展字段" min-width="150" sortable="sortable" :show-overflow-tooltip="true" header-align="center"/>-->

          <el-table-column label="操作" v-if="this.$isAdmin()" fixed="right" width="120" align="center"
                           :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button size="small" type="info" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-edit" type="primary" @click="submitForm">提交</el-button>
        <el-button icon="el-icon-delete" @click="hide()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script>
  import {dataToTree, treeToRows, upMoveTree} from '@/common/util/TreeUtil.js'

  let data = () => {
    return {
      isAdd: false,
      visible: false,
      row: {},
      oldRow: {},
      isChange: false,
      loading: false,
      tree: [],
    }


  }
  export default {
    data: data,
    props: ['search'],
    computed: {
      // systemDictDataList: {
      //   get() {
      //     return dataToTree(this.row.systemDictDataList);
      //   }, set(val) {
      //     this.$set(this.row, 'systemDictDataList', treeToRows(val))
      //   }
      // }
    },
    methods: {
      show: function (row) {
        this.oldRow = row;

        this.row = JSON.parse(JSON.stringify(row));
        if (this.row.systemDictDataList) {
          this.tree = dataToTree(this.row.systemDictDataList)
        }
        this.visible = true;
        this.isChange = false;
      },
      showAdd: function () {
        this.isAdd = true;
        this.visible = true;
        this.oldRow = null;
        this.isChange = false;
        this.tree = []
        this.row = {
          systemDictDataList: []
        }
      },
      hide: function () {
        this.visible = false;
      },
      hideDo: function () {
        this.isAdd = false;
        if (this.isChange && this.oldRow) {
          for (let item in this.oldRow) {
            let val = this.row[item];
            this.oldRow[item] = val;
          }
        } else {
          this.search();
        }
      },
      treeDelete(id) {
        this.row.systemDictDataList = treeToRows(this.tree).filter(item => item.id != id)
        this.tree = dataToTree(this.row.systemDictDataList);
      },
      addRow(parentId) {
        let weight = this.row.systemDictDataList.length + 1;
        let obj = {
          id: (((1 + Math.random()) * 0x1000000000) | 0).toString(16).substring(1) + weight,
          weight: weight
        };
        if (this.row.type == 'tree') {
          obj.parentId = parentId;
          this.row.systemDictDataList = treeToRows(this.tree)
        }
        this.row.systemDictDataList.push(obj);
        this.tree = dataToTree(this.row.systemDictDataList);
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.onSubmit();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      sortChange: function (d) {
        this.sheet.sort = d && d.prop
        this.sheet.order = d && d.order && d.order.indexOf('asc') >= 0 ? 'ASC' : 'DESC'
        this.search()
      },
      handleDelete(index, row) {
        this.row.systemDictDataList.splice(index, 1);
      },
      onSubmit: function () {
        if (this.row.type == 'tree') {
          this.row.systemDictDataList = treeToRows(this.tree)
        }
        let param = this.row;
        let vm = this;
        let url = this.isAdd ? '/systemDictController/addSystemDict' : '/systemDictController/updateSystemDict';

        vm.$http.post(url, param).then(res => {
          if (!res.data.success) {
            vm.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error'
            });
            return
          }
          vm.isChange = true;
          vm.$message({
            type: 'success',
            message: '保存成功!'
          })
          vm.hide()
        })
      }
    },
    name: "SystemDictEdit"
  }
</script>

<style scoped>

</style>

